<script setup>
import { ref, onMounted } from 'vue';
const ip = ref('');
import Request from "@/api/axios"
onMounted(() => {
    Request.get({ url: '/api/ip' }).then(res => {
        ip.value = res.ip;
    })
})
</script>

<template>
    <div class="ip-info-container">
        <p class="ip-label">您当前的 IP 地址是：</p>
        <p class="ip-value">{{ ip }}</p>
    </div>
</template>

<style scoped>
.ip-info-container {
    background-color: #f4f4f4; /* 设置背景颜色 */
    border: 1px solid #ccc; /* 添加边框 */
    border-radius: 8px; /* 边框圆角 */
    padding: 20px; /* 内边距 */
    text-align: center; /* 文本居中 */
    margin: 20px auto; /* 外边距，水平居中 */
    max-width: 300px; /* 最大宽度 */
}

.ip-label {
    font-size: 16px; /* 标签字体大小 */
    color: #555; /* 标签字体颜色 */
    margin-bottom: 5px; /* 标签底部外边距 */
}

.ip-value {
    font-size: 24px; /* IP 值字体大小 */
    font-weight: bold; /* IP 值字体加粗 */
    color: #333; /* IP 值字体颜色 */
}
</style>
